<template>
  <div id="nomessage">
    <div class="middle">
      <div class="top">
        <ChevronLeftIcon @click="back()" class="back" />
        <div>免打扰设置</div>
        <span>&nbsp;</span>
      </div>
      <div class="box">
        <li>
          <div>消息通知开关</div>
          <el-switch v-model="value1" style="--el-switch-on-color: #ff9900" />
        </li>
      </div>
      <p>消息类型</p>
      <div class="box">
        <li>
          <div>系统消息</div>
          <el-switch v-model="value2" style="--el-switch-on-color: #ff9900" />
        </li>
        <li>
          <div>微聊消息</div>
          <el-switch v-model="value3" style="--el-switch-on-color: #ff9900" />
        </li>
        <li>
          <div>预约看房</div>
          <el-switch v-model="value4" style="--el-switch-on-color: #ff9900" />
        </li>
      </div>
      <p>通知防打扰</p>
      <div class="box">
        <li>
          <div>通知时间限制</div>
          <el-switch v-model="value5" style="--el-switch-on-color: #ff9900" />
        </li>
        <li>
          <div>免打扰时段</div>
          <span>00:00-06:00 <ChevronRightIcon /></span>
        </li>
      </div>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import "./nomessage.css";
import { ChevronLeftIcon, ChevronRightIcon } from "tdesign-icons-vue-next";
import { ref } from "vue";
import { useRouter } from "vue-router";

let value1 = ref(true);
let value2 = ref(true);
let value3 = ref(true);
let value4 = ref(true);
let value5 = ref(true);

let router = useRouter();
let back = () => {
  router.go(-1);
};
</script>
  
<style>
</style>